﻿@{
    Layout = null;
}

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>读者管理</title>
    <link href="~/Content/Easy_UI/css/easyui.css" rel="stylesheet" />
    <link href="~/Content/Easy_UI/css/icon.css" rel="stylesheet" />
    <link href="~/Content/Easy_UI/css/menu.css" rel="stylesheet" />
    <script src="~/Scripts/jquery-1.10.2.min.js"></script>
    <script src="~/Content/Easy_UI/js/datapattern.js"></script>
    <script src="~/Content/Easy_UI/js/easyui-lang-zh_CN.js"></script>
    <script src="~/Content/Easy_UI/js/jquery.easyui.min.js"></script>
    <script src="~/Scripts/jquery.validate.min.js"></script>
    <script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
    <script type="text/javascript">
        $(function () {
            //隐藏添加,修改From表单
            $("#addDiv").css("display", "none");
            $("#editDiv").css("display", "none");

            loadData();
        });

        //加载数据
        function loadData(pars) {
            $('#tt').datagrid({
                url: '/UserInfo/ShowAllUser',
                title: '用户数据',
                width: 800,
                height: 505,
                fitColumns: true, //列自适应
                nowrap: false,
                idField: 'Id',//主键列的列明
                loadMsg: '正在加载用户的信息...',
                pagination: true,//是否有分页
                singleSelect: false,//是否单行选择
                pageSize: 15,//页大小，一页多少条数据
                pageNumber: 1,//当前页，默认的
                pageList: [10, 15, 20],
                queryParams: pars,//往后台传递参数
                columns: [[//c.UserName, c.UserPass, c.Email, c.RegTime
                    { field: 'ck', checkbox: true, align: 'left', width: 50 },
                    { field: 'Id', title: '读者卡号', width: 80 },
                    { field: 'ShowName', title: '用户名', width: 120 },
                    { field: 'UserType', title: '读者类型', width: 120 },
                    {
                        field: 'OpenDate', title: '开卡日期', width: 120, align: 'left',
                        formatter: function (value, row, index) {
                            return (eval(value.replace(/\/Date\((\d+)\)\//gi, "new Date($1)"))).pattern("yyyy-MM-dd");
                        }
                    },
                     {
                         field: 'EndDate', title: '有效日期', width: 120, align: 'left',
                         formatter: function (value, row, index) {
                             return (eval(value.replace(/\/Date\((\d+)\)\//gi, "new Date($1)"))).pattern("yyyy-MM-dd");
                         }
                     }
                ]],
                toolbar: [{
                    id: 'btnDelete',
                    text: '删除',
                    iconCls: 'icon-remove',
                    handler: function () {
                        deleteInfo();
                    }
                }, {
                    id: 'btnAdd',
                    text: '添加',
                    iconCls: 'icon-add',
                    handler: function () {
                        addInfo();
                    }
                }, {
                    id: 'btnEidt',
                    text: '编辑',
                    iconCls: 'icon-edit',
                    handler: function () {

                        showEditInfo();//展示要修改的用户数据
                    }
                }],
            });
        }

        //删除数据
        function deleteInfo() {
            var rows = $('#tt').datagrid('getSelections');//获取所选择的行
            if (!rows || rows.length == 0) {
                //alert("请选择要删除的商品！");
                $.messager.alert("提醒", "请选择要删除的记录!", "error");
                return;
            }

            $.messager.confirm("提示", "确定要删除数据吗？", function (r) {
                if (r) {
                    //要删除数据，获取要删除的记录的Id
                    var strId = "";
                    for (var i = 0; i < rows.length; i++) {
                        strId = strId + rows[i].Id + ",";
                    }
                    //去掉最后一个逗号“，”
                    strId = strId.substr(0, strId.length - 1);
                    //将获取的要删除的记录的Id值发送到服务端
                    $.post("/UserInfo/Delete", { "strId": strId }, function (data) {
                        if (data == "ok") {
                            //"reload"方法加载表格不会跳转到第一页
                            $('#tt').datagrid("reload");

                            //清除上次操作的历史的记录 异步请求会把上次操作的id继续带上
                            $('#tt').datagrid('clearSelections');
                        }
                        else {
                            $.messager.alert("提醒", "删除失败！", "error")
                        }
                    });
                }
            });
        }

        //添加数据
        function addInfo() {
            $("#addDiv").css("display", "block");

            //添加用户的操作是一个异步操作 清空文本框
            $("addForm input").val("");

            $("#addDiv").dialog({
                collapsible: true,//可折叠
                maximizable: true,//可最大化
                minimizable: true,//可最小化
                resizable: true,//可缩放
                modal: true,//制造一种模态
                buttons: [{
                    text: "确定",
                    iconCls: "icon-ok",
                    handler: function (data) {
                        //在表单提交之前要校验数据的合理性
                        validateInfo($("#addForm"));

                        $("#addForm").submit();//提交表单
                    }
                }, {
                    text: '取消',
                    handler: function () {
                        $("#addDiv").dialog("close");
                    }
                }]
            });
        }

        //完成添加后调用该方法
        function afterAdd(data) {
            if (data == "ok") {
                $("#addDiv").dialog("close");
                $.messager.alert("提示", "添加成功");
                //"reload"方法加载表格不会跳转到第一页
                $('#tt').datagrid("reload");

                //添加用户的操作是一个异步操作 清空文本框
                $("addForm input").val("");
            }
            else {
                $.messager.alert("提示", "添加失败");
            }
        }

        //表单校验
        function validateInfo(control) {
            control.validate({//表示对哪个form表单进行校验，获取form标签的id属性的值
                rules: {//表示验证规则
                    DZTM: "required",//表示对哪个表单元素进行校验，要写具体的表单元素的name属性的值
                    XM: "required",
                    YXRQ: "required"
                    //UPwd: {
                    //    required: true,
                    //    minlength: 5
                    //}
                },
                messages: {
                    DZTM: "请输入读者卡号",
                    XM: "请输入姓名",
                    YXRQ: "请输入有效日期"
                    //UPwd: {
                    //    required: "请输入密码",
                    //    minlength: jQuery.format("密码不能小于{0}个字符")
                    //}
                }
            });
        }

        //展示要修改的用户数据
        function showEditInfo() {
            //在弹窗之前要拿到要修改的用户的数据
            //判断一下用户是否选择了要修改的数据
            var rows = $("#tt").datagrid("getSelections");//获取所选择的行
            if (rows.length != 1) {
                $.messager.alert("提示", "请选择要修改的数据", "error");
                return;//跳出此方法
            }

            //将要修改的数据查询出来，显示到文本框中
            var id = rows[0].Id;
            $.get("/UserInfo/EditUser", { "id": id }, function (data) {
                //这里其实返回回来的是一个json对象,进行数据绑定
                $("#txtId").val(data.DZTM);
                $("#txtName").val(data.XM);
                $("#txtUserType").val(data.DZLX);
                $("#txtPassWord").val(data.MM);
                $("#txtOpenDate").val((eval(data.YXRQ.replace(/\/Date\((\d+)\)\//gi, "new Date($1)"))).pattern("yyyy-MM-dd"));
                
            });

            $("#editDiv").css("display", "block");
            $("#editDiv").dialog({
                collapsible: true,//可折叠
                maximizable: true,//可最大化
                minimizable: true,//可最小化
                resizable: true,//可缩放
                modal: true,//制造一种模态
                buttons: [{
                    text: "ok",
                    iconCls: "icon-ok",
                    handler: function (data) {
                        //在表单提交之前要校验数据的合理性
                        validateInfo($("#editForm"));

                        $("#editForm").submit();//提交表单
                    }
                }, {
                    text: 'Cancel',
                    handler: function () {
                        $("#editDiv").dialog("close");
                    }
                }]
            });
        }

        //更新以后调用的方法
        function afterEdit(data) {
            if (data == "ok") {
                $("#editDiv").dialog("close");
                $.messager.alert("提示", "更新成功");
                //"reload"方法加载表格不会跳转到第一页
                $('#tt').datagrid("reload");
            }
            else {
                $.messager.alert("提示", "更新失败");
            }
        }
    </script>
</head>
<body>
    <div>
        <table id="tt" style="width:600px;" title="标题" iconcls="icon-edit"></table>
    </div>
    <!-----------------------添加数据------------------------------>
    <div id="addDiv" style="width:400px;height:300px;" title="添加用户数据">
        @using (Ajax.BeginForm("AddUser", "UserInfo", new { }, new AjaxOptions { HttpMethod = "post", OnSuccess = "afterAdd" }, new { id = "addForm" }))
        {
            <table>
                <tr><th>读&nbsp;者&nbsp;卡&nbsp;号:</th><td><input type="text" name="DZTM" /></td></tr>
                <tr><th>姓&nbsp;名:</th><td><input type="text" name="XM" /></td></tr>
                <tr>
                    <th>读&nbsp;者&nbsp;类&nbsp;型:</th>
                    <td>
                        <select name="DZLX">
                            <option value="0">本科生</option>
                            <option value="1">博士生</option>
                            <option value="2">教师</option>
                            <option value="3">学生</option>
                            <option value="4">研究生</option>
                            <option value="5">专升本</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <th>性&nbsp;别:</th>
                    <td>
                        <select name="XB">
                            <option value="0">男</option>
                            <option value="1">女</option>
                        </select>
                    </td>
                </tr>
                <tr><th>有&nbsp;效&nbsp;日&nbsp;期:</th><td><input type="text" name="YXRQ" placeholder="yyyy-mm-dd" /></td></tr>
            </table>
        }
    </div>

    <!-----------------------修改数据------------------------------>
    <div id="editDiv" style="width:400px;height:300px;" title="修改用户数据">
        @using (Ajax.BeginForm("EditUser", "UserInfo", new { }, new AjaxOptions { HttpMethod = "post", OnSuccess = "afterEdit" }, new { id = "editForm" }))
        {
            <input type="hidden" name="DZTM" id="txtId" />
            <table>
                <tr><th>姓&nbsp;名:</th><td><input type="text" name="XM" id="txtName" /></td></tr>
                <tr>
                    <th>读&nbsp;者&nbsp;类&nbsp;型:</th>
                    <td>
                        <select name="DZLX" id="txtUserType">
                            <option value="本科生">本科生</option>
                            <option value="博士生">博士生</option>
                            <option value="教师">教师</option>
                            <option value="学生">学生</option>
                            <option value="研究生">研究生</option>
                            <option value="专升本">专升本</option>
                        </select>
                    </td>
                </tr>
                <tr><th>密&nbsp;码:</th><td><input type="password" name="MM" id="txtPassWord" /></td></tr>
                <tr><th>有&nbsp;效&nbsp;日&nbsp;期:</th><td><input type="text" name="YXRQ" id="txtOpenDate" placeholder="yyyy-mm-dd"/></td></tr>
            </table>
        }
    </div>
</body>
</html>
